<template>
  <div>
    <div v-if="tabsDataList[0].count === 0" class="h-[400px] flex items-center justify-center">
      <a-empty :image="simpleImage" description="暂无数据" />
    </div>

    <div v-else>
      <div class="tip-text">经过智能分析，为你推荐</div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in tabsDataList"
          :key="item.name"
          :label="item.label + '(' + item.count + ')'"
          :name="item.name"
        >
          <component
            :is="item.compName"
            :data-list="currentDataList"
            :loading="loading"
            mode="list"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Empty } from 'ant-design-vue'
import { mapGetters } from 'vuex'
import LandList from '@/components/portal/resource/LandList.vue'
import { getLandPageList } from '@/api/resource'
import { getParkPageList } from '@/api/park'
import { getPolicyPageList } from '@/api/policy'
export default Vue.extend({
  components: {
    LandList,
    WorkshopList: () => import('@/components/portal/resource/WorkshopList.vue'),
    BuildingList: () => import('@/components/portal/resource/BuildingList.vue'),
    DepositoryList: () => import('@/components/portal/resource/DepositoryList.vue'),
    ParkList: () => import('@/components/portal/park/ParkList.vue'),
    PolicyList: () => import('@/components/portal/policy/PolicyList.vue'),
  },
  data() {
    return {
      loading: false,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      dataList: [],
      activeName: '',
      tabsDataList: [
        {
          label: '土地',
          name: 'Land',
          count: 0,
          compName: 'LandList',
        },
        {
          label: '园区',
          name: 'Park',
          count: 0,
          compName: 'ParkList',
        },
        {
          label: '政策',
          name: 'Policy',
          count: 0,
          compName: 'PolicyList',
        },
      ],
      params: {},
      resourceList: [],
      parkList: [],
      policyList: [],
    }
  },
  computed: {
    ...mapGetters('aiSelect', ['resource']),
    currentDataList() {
      switch (this.activeName) {
        case 'Park':
          return this.parkList
        case 'Policy':
          return this.policyList
        default:
          return this.resourceList
      }
    },
  },
  watch: {
    resource(val) {
      if (val) {
        this.$set(this.tabsDataList, 0, {
          label: val.label,
          name: val.name,
          count: 0,
          compName: val.compName,
        })

        this.activeName = val.name
        this.params = val.params
        this.fetchData()
      }
    },
  },
  methods: {
    async fetchData() {
      const { activeName } = this
      this.loading = true
      const methodMap = {
        Land: getLandPageList,
      }

      const resourceParams = {
        conditions: {},
        pageInfo: {
          pageNum: 1,
          pageSize: 3,
        },
        sort: { 'data.sort': -1 },
      }

      const parkParams = {
        conditions: {},
        pageInfo: {
          pageNum: 1,
          pageSize: 1,
        },
        sort: { 'data.sort': -1 },
      }

      const policyParams = {}

      // Object.keys(params).forEach((k) => {
      //   const value = params[k]
      //   if (value) {
      //     console.log(
      //       '%c [ params[k] ]-105',
      //       'font-size:13px; background:pink; color:#bf2c9f;',
      //       params[k]
      //     )
      //     defaultParams.conditions[`data.${k}`] = params[k]

      //   }
      // })
      const [resource, park, policy] = await Promise.all([
        methodMap[activeName](resourceParams),
        getParkPageList(parkParams),
        getPolicyPageList(policyParams),
      ])

      console.log(
        '%c [ resouse, park, policy ]-135',
        'font-size:13px; background:pink; color:#bf2c9f;',
        resource,
        park,
        policy
      )

      this.tabsDataList[0].count = resource.list.length
      this.tabsDataList[1].count = park.list.length
      this.tabsDataList[2].count = policy.list.length

      this.resourceList = resource.list
      this.parkList = park.list
      this.policyList = policy.list

      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
})
</script>
<style lang="scss" scoped>
.tip-text {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0;
}
</style>
